<template>
  <div class="contanier">
    <!--头部-->
    <div class="header">
      <select name="" id="">
        <option value="">上海</option>
        <option value="">北京</option>
        <option value="">天津</option>
        <option value="">天津1</option>
      </select>
      <p>影院</p>
      <van-icon name="search" />
    </div>

    <!--中间内容区-->
    <!--下拉框-->
    <div class="middle">
    <div class="top">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value2" :options="option2" />
        <van-dropdown-item v-model="value3" :options="option3" />
        <van-dropdown-item v-model="value4" :options="option4" />
      </van-dropdown-menu>
    </div>
      <div class="render">
          <ul  class="tag">
              <li v-for="(item) in items">
                 {{item.p1}}
                  <span>{{item.p2}}</span>
                  <dl>
                     <dt id="da">{{item.price}}</dt>
                     <dd>{{item.distance}}</dd>
                  </dl>
                 
              </li>
          </ul>
      </div>
    </div>
    
    <!--底部-->
    <router-view></router-view>
    <div class="footer">
    <van-tabbar v-model="active" route>
  <van-tabbar-item to="/" icon="home-o">电影</van-tabbar-item>
  <van-tabbar-item to="/yingyuan"  icon="search">影院</van-tabbar-item>
  <van-tabbar-item to="/zixun"  icon="comment-o">资讯</van-tabbar-item>
  <van-tabbar-item to="/user"  icon="contact-o">我的</van-tabbar-item>
</van-tabbar>
    </div>
  </div>
</template>


<script setup>
import { ref, reactive } from "vue";

 
  
    const active = ref(0);
   
  

//下拉框
const value2 = ref(0);
const value3 = ref(0);
const value4 = ref(0);

const option2 = [
  { text: "全称", value: 0 },
  { text: "新款商品", value: 1 },
  { text: "活动商品", value: 2 },
];

const option3 = [
  { text: "APP订票", value: 0 },
  { text: "新款商品", value: 1 },
  { text: "活动商品", value: 2 },
];

const option4 = [
  { text: "最近去过", value: 0 },
  { text: "新款商品", value: 1 },
  { text: "活动商品", value: 2 },
];

//数据渲染定义
let items = reactive([
  {
    id: 1,
    p1: "上海黄浦剧场",
    p2: "上海市北京东路780号",
    price: "￥44起",
    distance: "距离位置",
  },
  {
    id: 2,
    p1: "大悦黄浦剧场",
    p2: "上海市北京东路780号",
    price: "￥65起",
    distance: "距离位置",
  },
  {
    id: 3,
    p1: "胜利电影院",
    p2: "上海市北京东路780号",
    price: "￥84起",
    distance: "距离位置",
  },
  {
    id: 4,
    p1: "上海浙江ID安医院",
    p2: "上海市北京东路780号",
    price: "￥4124起",
    distance: "距离位置",
  },
  {
    id: 5,
    p1: "上海黄浦剧场1",
    p2: "上海市北京东路780号",
    price: "￥784起",
    distance: "距离位置",
  },
  {
    id: 6,
    p1: "上海黄浦剧场2",
    p2: "上海市北京东路780号",
    price: "￥4144起",
    distance: "距离位置",
  },
  {
    id: 7,
    p1: "上海黄浦剧场3",
    p2: "上海市北京东路780号",
    price: "￥4142起",
    distance: "距离位置",
  },
  {
    id: 8,
    p1: "上海黄124浦剧场4",
    p2: "上海市北京东路780号",
    price: "￥412起",
    distance: "距离位置",
  },
  {
    id: 9,
    p1: "上海黄浦剧场532",
    p2: "上海市北京东路780号",
    price: "￥94起",
    distance: "距离位置",
  },
  {
    id: 10,
    p1: "上海黄浦剧场",
    p2: "北京市市北京东路12480号",
    price: "￥144起",
    distance: "距离位置",
  },
]);
</script>

<style lang="scss" >
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
html,
body,
#app,
.contanier {
  width: 100%;
  height: 100%;
}

.contanier {
  display: flex;
  flex-direction: column;
  .header {
    display: flex;
    justify-content: space-between;
  
  }
    
  }

  .middle{
      
    background: #ffffff;
    .render{
       display: flex;
        justify-content: space-between;
        margin-top: 10px;
        .tag {
            li{
                width: 355px;
                height: 50px;
                border-bottom: 1px solid #ccc;
                 float: left;
                 font-size: 14px;
                 margin-top: 10px;
              
                dl{
                    width: 80px;
                    height: 50px;
                    float: right;
                   #da{
                    color: #ff5f16;
                   }
                  
                }
            }
        }
    }
    
  }
  .footer{
  display: flex;
  flex: 1;
  }

</style>
